<template>
	<view>

		<!-- <cu-custom bgColor="bg-gradual-green" :isBack="true">
			<text slot="content">支付订单</text>
		</cu-custom> -->
		
		
		<view class="xc-flex xc-flex-col-center xc-border-bottom xc-bg-white xc-padding-15">
			<view class="xc-w-80">支付单号：</view>
			<view class="xc-flex-1">9845044555</view>
		</view>
		<view class="xc-flex xc-flex-col-center xc-border-bottom xc-bg-white xc-padding-15">
			<view class="xc-w-80">支付金额：</view>
			<view class="xc-flex-1 xc-c-red">980元</view>
		</view>
		
		<view class="cart-list xc-margin-t">
			<view class="cart-item" v-for="(item,index) of payway" @tap="changePay(item)" :key="index">

				<view class="margin-right xc-w-30 xc-h-30" >
				<image :src="item.ico" class="xc-w-30 xc-h-30"></image>	
					
				</view>
				
				<view class="cart-item-body">
					<view class="text-black margin-bottom-xs">
						<view class="text-cut xc-text-16">{{item.title}}</view>
					</view>
					<view v-if="item.type=='yue'" class="text-gray text-sm flex">
						<view class="text-cut">当前余额: ￥800</view>
					</view>
					<view v-if="item.type=='jifen'" class="text-gray text-sm flex">
						<view class="text-cut">当前积分: 350</view>
					</view>
				</view>
			
				<view class="cart-item-check" >
					<text class="cuIcon-round" v-if="item.type!=paytype"></text> 
					<text class="cuIcon-roundcheckfill" v-if="item.type==paytype"></text>
				</view>
				
				
			</view>
		</view>

		<view class="padding flex flex-direction">
			<button class="cu-btn lg bg-gradual-green" :loading="loading" @tap="buy">
				确认支付
			</button>
		</view>
	
	</view>
</template>

<script>
	// import WXPAY from '../../api/wxpay.js'
	export default {
		data() {
			return {
				loading: false,
				price: 1,
				providerList: [],
				
				paytype : "yue",
				payway: [
					{
						type: "yue",
						title:"余额支付",
						tip:"推荐使用",
						ico:"../../static/images/yuer.png"
					},
					{
						type: "wxpay",
						title:"微信支付",
						tip:"推荐使用",
						ico:"../../static/images/wxpay.png"
					},
					{
						type: "alipay",
						title:"支付宝",
						tip:"推荐使用",
						ico:"../../static/images/alipay.png"
					},
					{
						type: "jifen",
						title:"积分兑换",
						tip:"推荐使用",
						ico:"../../static/images/jifen.png"
					}
				],
				templateAll:`
				<template>
	<view>

		<!-- <cu-custom bgColor="bg-gradual-green" :isBack="true">
			<text slot="content">支付订单</text>
		</cu-custom> -->
		
		
		<view class="xc-flex xc-flex-col-center xc-border-bottom xc-bg-white xc-padding-15">
			<view class="xc-w-80">支付单号：</view>
			<view class="xc-flex-1">9845044555</view>
		</view>
		<view class="xc-flex xc-flex-col-center xc-border-bottom xc-bg-white xc-padding-15">
			<view class="xc-w-80">支付金额：</view>
			<view class="xc-flex-1 xc-c-red">980元</view>
		</view>
		
		<view class="cart-list xc-margin-t">
			<view class="cart-item" v-for="(item,index) of payway" @tap="changePay(item)" :key="index">

				<view class="margin-right xc-w-30 xc-h-30" >
				<image :src="item.ico" class="xc-w-30 xc-h-30"></image>	
					
				</view>
				
				<view class="cart-item-body">
					<view class="text-black margin-bottom-xs">
						<view class="text-cut xc-text-16">{{item.title}}</view>
					</view>
					<view v-if="item.type=='yue'" class="text-gray text-sm flex">
						<view class="text-cut">当前余额: ￥800</view>
					</view>
					<view v-if="item.type=='jifen'" class="text-gray text-sm flex">
						<view class="text-cut">当前积分: 350</view>
					</view>
				</view>
			
				<view class="cart-item-check" >
					<text class="cuIcon-round" v-if="item.type!=paytype"></text> 
					<text class="cuIcon-roundcheckfill" v-if="item.type==paytype"></text>
				</view>
				
				
			</view>
		</view>

		<view class="padding flex flex-direction">
			<button class="cu-btn lg bg-gradual-green" :loading="loading" @tap="buy">
				确认支付
			</button>
		</view>
	
	</view>
</template>

<script>
	// import WXPAY from '../../api/wxpay.js'
	export default {
		data() {
			return {
				loading: false,
				price: 1,
				providerList: [],
				
				paytype : "yue",
				payway: [
					{
						type: "yue",
						title:"余额支付",
						tip:"推荐使用",
						ico:"../../static/images/yuer.png"
					},
					{
						type: "wxpay",
						title:"微信支付",
						tip:"推荐使用",
						ico:"../../static/images/wxpay.png"
					},
					{
						type: "alipay",
						title:"支付宝",
						tip:"推荐使用",
						ico:"../../static/images/alipay.png"
					},
					{
						type: "jifen",
						title:"积分兑换",
						tip:"推荐使用",
						ico:"../../static/images/jifen.png"
					}
				]
			}
		},
		
		methods: {
			
			changePay(item){
				this.paytype = item.type;
			},
			
			buy(){
				let that = this;
				
				//that.loading = true;
				// uni.redirectTo({
				// 	url:'result?orderId=1'
				// })
				//获取统一支付
				WXPAY.pay({params:{logs_id:8769}}).then(resb=>{
					console.log("统一支付返回",resb);
					let payData = resb.data.data;

					
					//payData.timestamp = payData.timestamp - 0;
					console.log("payData",payData);
					
					uni.requestPayment({
					    provider: "wxpay",
					    orderInfo: payData,
					    success: (e) => {
					        console.log("success", e);
					        uni.showToast({
					            title: "感谢您的赞助!"
					        })
					    },
					    fail: (e) => {
					        //console.log("fail", JSON.stringify(e));
					        uni.showModal({
					            content: "用户取消支付",
					            showCancel: false
					        })
					    },
					    complete: (e) => {
							 //console.log("complete", JSON.stringify(e));
					        //this.providerList[index].loading = false;
					    }
					})

					
				})
								

			}
		}
	}
</ script>

<style>
.cart-item{ display: flex; padding: 20rpx; background-color: #FFF; border-bottom: 1px solid #EEEEEE; align-items: center;}
.cart-item-body{ flex:1; }
.cart-item-check{ margin-right:20rpx;}
.cart-item-check text{ font-size: 50rpx; color:#4074bd}
</style>

				`
			}
		},
		
		methods: {
			
			changePay(item){
				this.paytype = item.type;
			},
			
			buy(){
				let that = this;
				
				//that.loading = true;
				// uni.redirectTo({
				// 	url:'result?orderId=1'
				// })
				//获取统一支付
				WXPAY.pay({params:{logs_id:8769}}).then(resb=>{
					console.log("统一支付返回",resb);
					let payData = resb.data.data;

					
					//payData.timestamp = payData.timestamp - 0;
					console.log("payData",payData);
					
					uni.requestPayment({
					    provider: "wxpay",
					    orderInfo: payData,
					    success: (e) => {
					        console.log("success", e);
					        uni.showToast({
					            title: "感谢您的赞助!"
					        })
					    },
					    fail: (e) => {
					        //console.log("fail", JSON.stringify(e));
					        uni.showModal({
					            content: "用户取消支付",
					            showCancel: false
					        })
					    },
					    complete: (e) => {
							 //console.log("complete", JSON.stringify(e));
					        //this.providerList[index].loading = false;
					    }
					})

					
				})
								

			}
		}
	}
</script>

<style>
.cart-item{ display: flex; padding: 20rpx; background-color: #FFF; border-bottom: 1px solid #EEEEEE; align-items: center;}
.cart-item-body{ flex:1; }
.cart-item-check{ margin-right:20rpx;}
.cart-item-check text{ font-size: 50rpx; color:#4074bd}
</style>
